<template>
    <div class="new-experiment">
        <div class="n-e-wrap">
            <el-card @click.native="handleAdd('新建空白实验', '')" class="n-e-card">
                <div class="n-e-con">
                    <i class="el-icon-circle-plus-outline"></i>
                    <span class="n-e-c-con">新建空白实验</span>
                </div>
            </el-card>
            <el-card @click.native="handleAdd('从模板创建实验', item.value)" class="n-e-card" v-for="(item, i) in cardList" :key="i">
                <div class="n-e-title">场景 {{i+1}}</div>
                <div class="n-e-con">
                    <span class="n-e-c-name">【{{item.name}}】</span>
                    <span class="n-e-c-desc">{{item.desc}}</span>
                    <i :class="`iconfont ${item.icon}`"></i>
                    <span class="n-e-c-con">{{item.con}}</span>
                </div>
            </el-card>
        </div>
        <add-dialog :addForm="addForm" @save="handleSave"></add-dialog>
    </div>
</template>
<script>
import AddDialog from './AddDialog'
export default {
    name: 'NewExperiment',
    components: { AddDialog },
    data () {
        return {
            addForm: {
                show: false,
                title: '',
                form: {
                    experimentName: '',
                    description: ''
                }
            },
            cardList: [
                { name: '文本分析', value: '1', desc: '信用卡消费分析', icon: 'icon-shujuliebiao', con: '基于信用卡消费数据， 利用评分卡进行分析。' },
                { name: '文本分析', value: '2', desc: '信用卡消费分析', icon: 'icon-shujuliebiao', con: '基于信用卡消费数据， 利用评分卡进行分析。' },
                { name: '文本分析', value: '3', desc: '信用卡消费分析', icon: 'icon-shujuliebiao', con: '基于信用卡消费数据， 利用评分卡进行分析。' },
                { name: '文本分析', value: '4', desc: '信用卡消费分析', icon: 'icon-shujuliebiao', con: '基于信用卡消费数据， 利用评分卡进行分析。' },
                { name: '文本分析', value: '5', desc: '信用卡消费分析', icon: 'icon-shujuliebiao', con: '基于信用卡消费数据， 利用评分卡进行分析。' },
                { name: '文本分析', value: '6', desc: '信用卡消费分析', icon: 'icon-shujuliebiao', con: '基于信用卡消费数据， 利用评分卡进行分析。' },
                { name: '文本分析', value: '7', desc: '信用卡消费分析', icon: 'icon-shujuliebiao', con: '基于信用卡消费数据， 利用评分卡进行分析。' },
                { name: '文本分析', value: '8', desc: '信用卡消费分析', icon: 'icon-shujuliebiao', con: '基于信用卡消费数据， 利用评分卡进行分析。' },
                { name: '文本分析', value: '9', desc: '信用卡消费分析', icon: 'icon-shujuliebiao', con: '基于信用卡消费数据， 利用评分卡进行分析。' },
                { name: '文本分析', value: '10', desc: '信用卡消费分析', icon: 'icon-shujuliebiao', con: '基于信用卡消费数据， 利用评分卡进行分析。' },
                { name: '文本分析', value: '11', desc: '信用卡消费分析', icon: 'icon-shujuliebiao', con: '基于信用卡消费数据， 利用评分卡进行分析。' },
                { name: '文本分析', value: '12', desc: '信用卡消费分析', icon: 'icon-shujuliebiao', con: '基于信用卡消费数据， 利用评分卡进行分析。' },
                { name: '文本分析', value: '13', desc: '信用卡消费分析', icon: 'icon-shujuliebiao', con: '基于信用卡消费数据， 利用评分卡进行分析。' },
                { name: '文本分析', value: '14', desc: '信用卡消费分析', icon: 'icon-shujuliebiao', con: '基于信用卡消费数据， 利用评分卡进行分析。' }
            ]
        }
    },
    methods: {
        handleAdd (title, type) {
            this.addForm.title = title
            this.addForm.show = true
        },
        handleSave () {
            const { experimentName, description } = this.addForm.form
            const params = {
                projectId: this.$projectId,
                experimentName,
                description
            }
            this.$post('experiment/createTemplate', params).then(res => {
                if (res) {
                    this.$message.success('保存成功')
                    this.addForm.show = false
                }
            })
        }
    }
}
</script>
<style lang="less">
    .new-experiment {
        width: 100%;
        .n-e-wrap {
            display: flex;
            padding-left: 50px;
            flex-wrap: wrap;
        }
        .n-e-card {
            width: 18%;
            margin: 5px;
            cursor: pointer;
            min-width: 180px;
        }
        .n-e-c-name {
            font-size: 16px;
            color: #333333;
            margin-bottom: 10px;
        }
        .n-e-con {
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 200px;
            i {
                font-size: 48px;
                color: #409EFF;
                margin: 15px 0;
            }
        }
    }
</style>
